<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>习悦数据统计平台</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="js/swiper/swiper-3.4.0.min.css">
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/animate/num.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts/echarts.min.js"></script>
    <style>
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    </style>
  </head>
  <body>

    <div class="main-box">

      <!-- 顶部导航 -->
      <div class="top-nav">
        <!-- 平台名称 -->
        <div class="nav-logo">
          <span>习悦数据统计平台</span>
        </div>
        <!-- 其他选项 -->
        <div class="nav-option">
          <span></span>
          <div class="play-btn">
            <span class="play-one"></span>
            <span class="play-two"></span>
          </div>
        </div>
        <!-- 当前日期 -->
        <div class="nav-date">
          <span>2016-12-2</span>
        </div>
      </div>

      <!-- s统计报表主体s -->
      <div class="datapage-box">

        <!-- 循环体 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">

              <div class="swiper-slide">
                <!-- sssssss 第一屏-平台概况 sssssss -->
                <div class="data-page data-page1" style="display:block;">
                  <div class="data-row data1-row1">
                    <!-- 昨日调用数 -->
                    <div class="data-row-cell data1-row1-cell data1-row1-cell1">
                      <h2 class="slight-text">昨天</h2>
                      <div class="data1-row1-cell-number">
                        <span class="light-text yesterdayAll">
                        </span>
                        <h3>昨日调用数</h3>
                      </div>
                    </div>
                    <!-- 今日调用数 -->
                    <div class="data-row-cell data1-row1-cell data1-row1-cell2">
                      <h2 class="slight-text">今天</h2>
                      <div class="data1-row1-cell-number">
                        <span class="green-text todayAll">
                          <em class="green-text"></em>
                        </span>
                        <h3>今日调用数</h3>
                      </div>
                    </div>
                    <!-- 累计调用数 -->
                    <div class="data-row-cell data1-row1-cell data1-row1-cell3">
                      <h2 class="slight-text">全部</h2>
                      <div class="data1-row1-cell-number">
                        <span class="light-text totalAll">
                          
                        </span>
                        <h3>累计调用数</h3>
                      </div>
                    </div>
                  </div>
                  <div class="data-row data1-row2">
                    <!-- 服务调用数 -->
                    <div class="data-row-cell data1-row2-cell data1-row2-cell1">
                      <h3 class="light-text">服务调用数</h3>
                      <div class="data1-row2-cell-chart data1-row2-cell1-chart" id="data1_row2_cell1_chart">

                      </div>
                    </div>
                    <!-- 近1小时服务调用情况 -->
                    <div class="data-row-cell data1-row2-cell data1-row2-cell2">
                      <h3 class="light-text">近1小时服务调用情况</h3>
                      <div class="data1-row2-cell-chart data1-row2-cell2-chart" id="data1_row2_cell2_chart">
                      </div>
                    </div>
                  </div>
                </div>
                <!-- eeeeeee 第一屏-平台概况 eeeeeee -->
              </div>

              <div class="swiper-slide">
                <!-- sssssss 第二屏-服务调用 sssssss -->
                <div class="data-page data-page2" style="display:block;">
                  <div class="data-row data2-row">
                    <!-- 人脸识别 今日 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell1">
                      <div class="data2-row-cell-number light-text">
                        <h2 class="green-text">人脸识别</h2>
                        <span class="black-text">
                          380
                        </span>
                        /
                        <em>
                          2806
                        </em>
                        <p class="light-text">
                          今日 / 累计
                        </p>
                      </div>
                    </div>
                    <!-- 人脸平台数据 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell2">
                      <!-- 人脸安卓数据 -->
                      <div class="data-row-cell platform-cell android-cell">
                        <div class="data2-row-cell-number light-text">
                          <h3 class="black-text">Android</h3>
                          <span class="black-text">
                            265
                          </span>
                          /
                          <em class="light-text">
                            1622
                          </em>
                        </div>
                      </div>
                      <!-- 人脸苹果数据 -->
                      <div class="data-row-cell platform-cell ios-cell">
                        <div class="data2-row-cell-number light-text">
                          <h3 class="black-text">iOS</h3>
                          <span class="black-text">
                            265
                          </span>
                          /
                          <em class="light-text">
                            1622
                          </em>
                        </div>
                      </div>
                    </div>
                    <!-- 人脸调用今日中走势图 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell3">
                      <h2 class="light-text">今日走势图</h2>
                      <div class="data2-row-cell-chart data2-row1-cell3-chart" id="data2_row1_cell3_chart">
                      </div>
                    </div>
                  </div>
                  <div class="data-row data2-row">
                    <!-- 物体识别 今日 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell1">
                      <div class="data2-row-cell-number light-text">
                        <h2 class="blue-text">物体识别</h2>
                        <span class="black-text">
                          380
                        </span>
                        /
                        <em>
                          2806
                        </em>
                        <p class="light-text">
                          今日 / 累计
                        </p>
                      </div>
                    </div>
                    <!-- 人脸平台数据 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell2">
                      <!-- 人脸安卓数据 -->
                      <div class="data-row-cell platform-cell android-cell">
                        <div class="data2-row-cell-number light-text">
                          <h3 class="black-text">Android</h3>
                          <span class="black-text">
                            265
                          </span>
                          /
                          <em class="light-text">
                            1622
                          </em>
                        </div>
                      </div>
                      <!-- 人脸苹果数据 -->
                      <div class="data-row-cell platform-cell ios-cell">
                        <div class="data2-row-cell-number light-text">
                          <h3 class="black-text">iOS</h3>
                          <span class="black-text">
                            265
                          </span>
                          /
                          <em class="light-text">
                            1622
                          </em>
                        </div>
                      </div>
                    </div>
                    <!-- 人脸调用今日中走势图 -->
                    <div class="data-row-cell data2-row-cell data2-row-cell3">
                      <h2 class="light-text">今日走势图</h2>
                      <div class="data2-row-cell-chart data2-row2-cell3-chart" id="data2_row2_cell3_chart">
                      </div>
                    </div>
                  </div>

                </div>
                <!-- eeeeeee 第二屏-服务调用 eeeeeee -->
              </div>

              <div class="swiper-slide">
                <!-- sssssss 第三屏-平台应用 sssssss -->
                <div class="data-page data-page3" style="display:block;">
                  <div class="data-row data3-row">
                    <!-- 平台应用 -->
                    <div class="data-row-cell data3-row-cell data3-row-cell1">
                      <div class="data-row-cell app-cell app-num-cell">
                        <div class="data3-row-cell-number">
                          <h2>平台应用</h2>
                          <div class="data3-data data3-data-main">
                            <span class="green-text">
                              12</span>
                            <br/>
                            <em>今日新增数</em>
                          </div>
                          <br/>
                          <div class="data3-data">
                            <span class="light-text">
                              386</span>
                            <br/>
                            <em>应用总数</em>
                          </div>
                          <div class="data3-data">
                            <span class="light-text">
                              215</span>
                            <br/>
                            <em>今日活跃应用数</em>
                          </div>
                        </div>
                      </div>
                      <div class="data-row-cell app-cell app-chart-cell">
                        <div class="data3-row-cell-chart data2-row1-cell1-chart" id="data3_row1_cell1_chart">
                        </div>
                      </div>
                    </div>
                    <!-- 今日调用排行 -->
                    <div class="data-row-cell data3-row-cell data3-row-cell2">
                      <h2>今日调用排行</h2>
                      <div class="divtable">
                        <div class="divtable-head">
                          <span>应用名称</span>
                          <span>总调用次数</span>
                        </div>
                        <div class="divtable-body">
                          <ul class="app-call-table">
                            <li>
                              <p>
                                <em class="green-text">1</em>
                                <i>650</i>
                                <span>习悦门禁系统</span>
                              </p>
                              <div class="scale-div">
                                <div class="scale-fill" style="width:45%">
                                </div>
                              </div>
                            </li>
                            <li>
                              <p>
                                <em class="green-text">2</em>
                                <i>465</i>
                                <span>机场快线车辆识别系统</span>
                              </p>
                              <div class="scale-div">
                                <div class="scale-fill" style="width:38%">
                                </div>
                              </div>
                            </li>
                            <li>
                              <p>
                                <em class="green-text">3</em>
                                <i>422</i>
                                <span>拱北口岸违法行为监控系统</span>
                              </p>
                              <div class="scale-div">
                                <div class="scale-fill" style="width:36%">
                                </div>
                              </div>
                            </li>
                            <li>
                              <p>
                                <em class="light-text">4</em>
                                <i>66</i>
                                <span>智脸APP</span>
                              </p>
                              <div class="scale-div">
                                <div class="scale-fill" style="width:4%">
                                </div>
                              </div>
                            </li>
                            <li>
                              <p>
                                <em class="light-text">4</em>
                                <i>60</i>
                                <span>智脸APP</span>
                              </p>
                              <div class="scale-div">
                                <div class="scale-fill" style="width:3%">
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- 今日延时排行 -->
                    <div class="data-row-cell data3-row-cell data3-row-cell3">
                      <h2>今日延时排行</h2>
                      <div class="divtable">
                        <div class="divtable-head">
                          <span>应用名称</span>
                          <span>最大延时接口</span>
                        </div>
                        <div class="divtable-body">
                          <ul class="app-delay-table">
                            <li>
                                <em class="green-text">1</em>
                                <div>
                                  <span>人脸区域检测</span>
                                  <em class="red-text">136ms</em>
                                </div>
                                <span>习悦门禁系统</span>
                            </li>
                            <li>
                                <em class="green-text">2</em>
                                <div>
                                  <span>物体区域检测</span>
                                  <em class="green-text">99ms</em>
                                </div>
                                <span>拱北口岸违法行为监控系统</span>
                            </li>
                            <li>
                                <em class="green-text">3</em>
                                <div>
                                  <span>物体区域检测</span>
                                  <em class="green-text">82ms</em>
                                </div>
                                <span>机场快线车辆识别系统</span>
                            </li>
                            <li>
                                <em class="light-text">4</em>
                                <div>
                                  <span>人脸区域检测</span>
                                  <em class="green-text">81ms</em>
                                </div>
                                <span>智脸APP</span>
                            </li>
                            <li>
                                <em class="light-text">4</em>
                                <div>
                                  <span>人脸区域检测</span>
                                  <em class="green-text">81ms</em>
                                </div>
                                <span>智脸APP</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <!-- eeeeeee 第三屏-平台应用 eeeeeee -->
              </div>

              <div class="swiper-slide">
                <!-- sssssss 第四屏-接口延时排行 sssssss -->
                <div class="data-page data-page4" style="display:block;">
                  <div class="data-row data4-row">
                    <div class="data4-row-head">
                      <h2>接口延时排行</h2>
                      <p class="light-text">
                        数值为5秒间调用的最大延时值，曲线表示近30秒内的延时走势
                      </p>
                    </div>

                    <!-- 接口合集 -->
                    <div class="data4-row-body">
                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          1、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="red-text">226 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell1_chart">
                          </div>
                        </div>
                      </div>

                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          2、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="green-text">138 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell2_chart">
                          </div>
                        </div>
                      </div>

                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          3、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="green-text">138 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell3_chart">
                          </div>
                        </div>
                      </div>

                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          4、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="green-text">138 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell4_chart">
                          </div>
                        </div>
                      </div>

                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          5、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="green-text">138 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell5_chart">
                          </div>
                        </div>
                      </div>

                      <!-- 接口块 -->
                      <div class="data-row-cell data4-row-cell">
                        <h3>
                          6、人脸区域检测
                        </h3>
                        <div class="data4-row-cell-number">
                          <h4 class="green-text">138 ms</h4>
                          <div class="data4-row-cell-chart" id="data4_row_cell6_chart">
                          </div>
                        </div>
                      </div>

                    </div>

                  </div>
                </div>
                <!-- eeeeeee 第四屏-接口延时排行 eeeeeee -->
              </div>

          </div>
        </div>

      </div>
      <!-- e统计报表主体e -->
    </div>

    <script src="js/swiper/swiper-3.4.0.jquery.min.js"></script>
    <script src="js/public.js"></script>
    <script src="js/datapage1.js"></script>
    <script src="js/datapage2.js"></script>
    <script src="js/datapage3.js"></script>
    <script src="js/datapage4.js"></script>

    <script>

    </script>

  </body>
</html>
